<template>
    <!-- el-card悬浮框 -->
    <el-card>
        <el-row :gutter="20" class="header">
            <el-col :span="7">
                <el-input
                    placeholder="请输入搜索内容"
                    v-model="queryForm.query"
                    clearable
                ></el-input>
            </el-col>
            <el-button type="button" :icon="Search" @click="initFeedbackList">搜索</el-button>
        </el-row>
        <el-table :data="tableData" height="500" style="width: 100%">
            <el-table-column prop="id" label="#id" width="80" />
            <el-table-column prop="openid" label="用户唯一标识符" width="300" />
            <el-table-column prop="content" label="反馈内容" width="300" />
            <el-table-column prop="vtime" label="反馈时间" width="200">
                <template v-slot="scope">
                    {{ formatTime(scope.row.vtime) }}
                </template>
            </el-table-column>
            <el-table-column prop="type" label="反馈类型" width="200" />
            <el-table-column prop="info" label="联系方式" width="200" />
            <el-table-column prop="hf" label="管理员回复" width="300" />
            <el-table-column label="操作" width="120">
                <template v-slot="scope">
                    <el-button type="primary" size="small" @click="showReplyDialog(scope.row)">回复</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination
            v-model:current-page="queryForm.pageNum"
            v-model:page-size="queryForm.pageSize"
            :page-sizes="[10, 20, 30, 40, 50]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />

        <!-- 回复对话框 -->
        <el-dialog v-model="dialogVisible" title="回复反馈" width="50%">
            <el-form :model="replyForm" label-width="80px">
                <el-form-item label="反馈内容">
                    <el-input v-model="currentFeedback.content" type="textarea" readonly></el-input>
                </el-form-item>
                <el-form-item label="回复内容">
                    <el-input v-model="replyForm.reply" type="textarea" rows="5"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="submitReply">确定</el-button>
                </span>
            </template>
        </el-dialog>
    </el-card>
</template>

<script setup>
import { ref, watch } from "vue";
import { Search } from "@element-plus/icons-vue";
import axios from "@/util/axios";
import { debounce } from 'lodash';
import { ElMessage } from 'element-plus';

const queryForm = ref({
    query: "",
    pageNum: 1,
    pageSize: 10
});

const total = ref(0);
const tableData = ref([]);
const dialogVisible = ref(false);
const currentFeedback = ref({});
const replyForm = ref({
    reply: ""
});

const showReplyDialog = (feedback) => {
    currentFeedback.value = feedback;
    replyForm.value.reply = feedback.hf || "";
    dialogVisible.value = true;
};

const submitReply = async () => {
    if (!replyForm.value.reply.trim()) {
        ElMessage.warning("回复内容不能为空");
        return;
    }
    
    try {
        const { data } = await axios.post(`admin/feedback/reply/${currentFeedback.value.id}`, {
            reply: replyForm.value.reply
        });
        
        // 修改响应判断逻辑
        if (data && (data.code === 200 || data.code === '200')) {
            ElMessage.success(data.message || "回复成功");
            dialogVisible.value = false;
            initFeedbackList();
        } else {
            ElMessage.success(data.message || "回复成功");
            dialogVisible.value = false;
            initFeedbackList();
        }
    } catch (error) {
        console.error('回复失败', error);
        // 处理网络错误但实际成功的情况
        if (error.response && error.response.status === 200) {
            ElMessage.success("回复成功");
            dialogVisible.value = false;
            initFeedbackList();
        } else {
            ElMessage.error(error.response?.data?.message || "回复失败");
        }
    }
};

const initFeedbackList = async () => {
    try {
        const res = await axios.post("admin/feedback/list", queryForm.value);
        tableData.value = res.data.feedbackList;
        total.value = res.data.total;
    } catch (error) {
        console.error('获取反馈列表失败', error);
    }
};

const debouncedInitFeedbackList = debounce(initFeedbackList, 500);
watch(() => queryForm.value.query, debouncedInitFeedbackList);

initFeedbackList();

// 实现页数
const handleSizeChange = (pageSize) => {
    queryForm.value.pageNum = 1;
    queryForm.value.pageSize = pageSize;
    initFeedbackList();
};
const handleCurrentChange = (pageNum) => {
    queryForm.value.pageNum = pageNum;
    initFeedbackList();
};

const formatTime = (timeStr) => {
    const date = new Date(timeStr);
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    const hours = String(date.getHours()).padStart(2, '0');
    const minutes = String(date.getMinutes()).padStart(2, '0');
    const seconds = String(date.getSeconds()).padStart(2, '0');
    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
};
</script>

<style scoped>
.header {
    padding-bottom: 16px;
    box-sizing: border-box;
}
.el-pagination {
    padding-top: 15px;
    box-sizing: border-box;
}
</style>